<template>
  <a-modal :title="$t('结账')" :width="width" :visible="visible" switchFullscreen @cancel="handleCancel" @ok="handleOk">
    <div>
      <a-table
        ref="table"
        size="middle"
        :scroll="{ x: true }"
        bordered
        :columns="columns"
        :dataSource="dataSource"
        :pagination="false"
        :loading="loading"
        class="j-table-force-nowrap"
      >
        <span slot="action" slot-scope="text, record">
          <a @click="handleDetail(record)">{{$t('结账')}}</a>
        </span>
        <template slot="actualPay" slot-scope="text, record">
          <a-input-number v-if="record.payType_dictText != $t('合计')" v-model="record.actualPay" @change="changeTotal(record)"></a-input-number>
          <span v-else>{{ record.actualPay.toFixed(2) }}</span>
        </template>
        <template slot="differ" slot-scope="text,record">
          <span v-if="record.differ != 0" style="color:red">{{record.differ}}</span>
          <span v-else>{{record.differ}}</span>
        </template>
      </a-table>
    </div>
  </a-modal>
</template>
<script>
import { postAction } from '@/api/manage'
export default {
  data() {
    return {
      width: 900,
      visible: false,
      columns: [
        {
          title: this.$t('收款方式'),
          align: 'center',
          dataIndex: 'payType_dictText',
        },
        {
          title: this.$t('收款笔数'),
          align: 'center',
          dataIndex: 'count',
          customCell: function () {
            return {
              style: {
                textAlign: 'right',
              },
            }
          },
        },
        {
          title: this.$t('应收金额'),
          align: 'center',
          dataIndex: 'shouldPay',
          customRender: function (text) {
            return text.toFixed(2)
          },
          customCell: function () {
            return {
              style: {
                textAlign: 'right',
              },
            }
          },
        },
        {
          title: this.$t('实收'),
          align: 'center',
          dataIndex: 'actualPay',
          customCell: function () {
            return {
              style: {
                textAlign: 'right',
              },
            }
          },
          scopedSlots: { customRender: 'actualPay' },
        },
        {
          title: this.$t('差额'),
          align: 'center',
          dataIndex: 'differ',
          customCell: function () {
            return {
              style: {
                textAlign: 'right',
              },
            }
          },
          scopedSlots:{customRender:'differ'},
        },
      ],
      dataSource: [],
      loading: false,
      model: {},
      lastTime: new Date().getTime()
    }
  },
  methods: {
    edit(list, model) {
      this.dataSource = []
      this.visible = true
      this.dataSource = [].concat(list)
      this.model = Object.assign({}, model)
      this.dataSource.pop()
      let total = {
        payType_dictText: this.$t('合计'),
        count: 0,
        shouldPay: 0,
        actualPay: 0,
        differ: 0,
      }
      let a = 0
      this.dataSource.forEach((col) => {
        col.actualPay = col.shouldPay
        col.differ = 0
        total.count += col.count
        total.shouldPay += col.shouldPay
        total.actualPay += col.actualPay
        total.differ += col.differ
        a++
        if (a == this.dataSource.length) {
          this.dataSource.push(total)
        }
      })
    },
    changeTotal(record) {
      this.dataSource.pop()
      this.dataSource.forEach((cds) => {
        if(cds.payType_dictText == record.payType_dictText){
          cds.differ = (Number(cds.actualPay ) - Number(cds.shouldPay)).toFixed(2)
        }
      })
      this.addSumRow(['payType_dictText', 'count', 'shouldPay', 'actualPay', 'differ'], this.dataSource)
    },
    addSumRow(myArr, dataSource) {
      let total = {},that=this
      myArr.forEach(function (tcn, ind) {
        if (ind == 0) {
          total[tcn] = that.$t('合计')
        } else {
          total[tcn] = 0
        }
      })
      for (let key in total) {
        dataSource.forEach(function (ds) {
          if (!isNaN(total[key])) {
            total[key] += Number(ds[key])
          }
        })
      }
      dataSource.push(total)
    },
    handleCancel() {
      this.visible = false
    },
    handleOk() {
      let time =
        (new Date().getTime() - new Date(this.lastTime).getTime()) / 100;
      if (time <= 5) {
        return;
      }
      this.lastTime = new Date();
      this.dataSource.forEach(col=>{
        if(col.payType_dictText == this.$t('合计')){
          this.dataSource.pop()
        }
      })
      let query = {}
      query.bisCheckOutPayList = this.dataSource
      query.operator = this.model.operator
      query.deviceId = this.model.deviceId
      query.deviceType =  this.model.deviceType
      postAction('/checkout/bisCheckOut/add',query).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
          this.visible = false
          this.$emit('callback')
        } else {
          this.$message.warning(res.message)
        }
      })
    },
  },
}
</script>